<template>
  <div class="pk-markdown">
    <div v-html="markdown.render(modelValue)" v-if="modelValue"></div>
    <div v-else class="pk-markdown-loading" v-loading="loading"> </div>
  </div>
</template>

<script setup>
  import { defineProps, onMounted, ref } from 'vue'
  import MarkdownIt from 'markdown-it';
  const markdown = new MarkdownIt();
  const loading = ref(true)
  defineProps({
    modelValue: {
      type: String,
      default: ''
    }
  })

  onMounted(()=>{
    // console.log('-------MarkdownIt--------', props.modelValue)
  })
</script>

<style lang="scss" scoped>
.pk-markdown{
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
  &-loading{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
}
</style>